/*
 * @Author: luoqi
 * @Date: 2022-03-31 14:35:04
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-11 20:12:29
 * @Description: 
 */
import React, { useState } from 'react';
import { Table, ConfigProvider, Space, Popconfirm, message, Row, Col,Button } from 'antd';
import Addagency from './AddAgency';
import CommonButton from '../../components/HOC/HocButton/CommonButton';
import zhCN from "antd/es/locale/zh_CN";
import axios from '../../util/axios'


const Addtabel = (props) => {
  //分页
  let [pag, setPag] = useState({ current: 1, pageSize: 3, pageSizeOptions: [5, 10, 20], showTotal: total => `共 ${total} 条`, onChange: changePage })
  //表格数据
  let [data, setData] = useState([])
  //页数更改时
  function changePage(page, pageSize) {
    setPag({ ...pag, current: page, pageSize })
  }
  const columns = [
    {
      title: '持卡人姓名',
      dataIndex: 'chiKaName',
      key: 'chiKaName',
    },
    {
      title: '银行名称',
      key: 'yinHangName',
      dataIndex: 'yinHangName',
    },
    {
      title: '银行卡号',
      dataIndex: 'yinHangKaHao',
      key: 'yinHangKaHao',
    },
    {
      title: '代付金额',
      dataIndex: 'yuE',
      key: 'yuE',
    },

    // {
    //   title: '卡商',
    //   dataIndex: 'cardDealer',
    //   key: 'cardDealer',
    //   render: text => (<span>{text && cardDealerArr.find(item => item.id == text).name}</span>)
    // },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Addagency addAgency={addAgency} modifyAgency={modifyAgency} type='modify' data={record} />
          <Popconfirm
            title="你确定删除该代付吗？"
            okText="确定"
            cancelText="取消"
            onConfirm={()=>confirm(record)}
            onCancel={cancel}>
            <div>
              <CommonButton buttonName="删除" type="primary" className="red" size="small" /></div>
          </Popconfirm>

        </Space>
      ),
    },
  ];

  //修改代付
  function modifyAgency(obj) {
    console.log(obj);
    let arr = data.map(item => {
      item.key = item.id
      return item.id == obj.id ? obj : item
    })
    console.log(arr);
    setData(arr)

  }
  //添加代付
  function addAgency(obj) {
    console.log('父组件收到的值', obj);
    if (data.length > 0) {
      obj.id = data[data.length - 1].id + 1
      console.log('第二个id', obj.id)
    } else {
      console.log('第一个id')
      obj.id = 1
    }
    obj.key = obj.id
    setData([...data, obj])
  }
  //删除
  function confirm(obj) {
    console.log(obj);
    setData(data.filter(item=>{
      return item.id!=obj.id
    }))
    message.success('Click on Yes');
  }
  //取消删除
  function cancel(e) {
    console.log(e);
    message.error('Click on No');
  }
  //提交所有代付
  function submitData(){
    console.log(data)
    axios({
      url: '/insertDaiFuXinXi',
      method: 'post',
      data:{yinHangKas:data.map(item=>({...item,name:JSON.parse(localStorage.getItem('user')).uName,userId:12}))},
      headers: {
        'content-type': 'application/json'
      },
    }).then(res => {
      console.log(res);
      if (res.code === 200) {
        message.success('添加代付成功，待管理员审核');
        props.setIsModalVisible(false)
        props.isAll(true)
      }else{
        message.error('添加代付失败'+res.msg);
      }
    }).catch(res=>{
      message.error('请求错误'+res.msg);
    })
  }
  return (
    <div>
      <Row>
        <Col><Addagency addAgency={addAgency} modifyAgency={modifyAgency} type='add' data={{}} /></Col>
      </Row>

      <br />
      <ConfigProvider locale={zhCN}>
        <Table columns={columns} dataSource={data} pagination={pag} />
      </ConfigProvider>
      <br/>
      <Row justify='end'>
        <Col >
        <Button type="primary" onClick={submitData} style={{ width: 150 }}>
                确认
      </Button>
        </Col>
      </Row>
      
    </div>
  );
}

export default Addtabel;
